<template>
	<!-- 新契约工作列表模块-特别事项 -->
	<div class="fillcontain">
		<p style="margin: 0.625rem;font-weight: bold;">核保综合结论</p>
		<div class="contain">
			<div v-for="(val,index) in resultList">
				<span hidden v-if="index ==0" ref="span0">{{val.name+":"+val.robotResultVos.length}}</span>
				<span hidden v-if="index ==1" ref="span1">{{val.name+":"+val.robotResultVos.length}}</span>
				<span hidden v-if="index ==2" ref="span2">{{val.name+":"+val.robotResultVos.length}}</span>
				<el-table :data="val.robotResultVos" :span-method="objectSpanMethod" :show-header="isShowHeader(index)">
					<!-- el-table无数据 -->
					<div slot="empty" style="height:0px">
					</div>
					<el-table-column label="险种类别" min-width="100" prop="name" show-overflow-tooltip></el-table-column>
					<el-table-column label="险种名称" min-width="100" show-overflow-tooltip>
						<template slot-scope="scope">
							<div v-html="scope.row.crtablHtml"></div>
						</template>
					</el-table-column>
					<el-table-column label="核保风险" min-width="120" prop="riskName" align='center'></el-table-column>
					<el-table-column label="智能点评" min-width="120">
						<template slot-scope="scope">
							<div v-for="(value,key) in scope.row.reviewBasisMapList">{{key}}</div>
						</template>
					</el-table-column>
					<el-table-column label="评点依据" min-width="80">
						<template slot-scope="scope">
							<div v-for="(value,key) in scope.row.reviewBasisMapList">
								<el-button @click="seeRevieDetail(value)">查看</el-button>
							</div>
						</template>
					</el-table-column>

					<el-table-column label="生成时间" min-width="120" prop="createTime" align='center'></el-table-column>
					<el-table-column label="综合结论" min-width="120" prop="comprehensiveComments" align='center' show-overflow-tooltip></el-table-column>
				</el-table>
			</div>
		</div>
		
		<p style="margin: 0.625rem;font-weight: bold;">异常项目一览</p>
		<el-collapse v-model="activeNames1" >
			<el-collapse-item :key="item.groupType" v-for="(item,index) in unNormalProductList" :title="item.groupName" :name="index">
				<!-- 循环title -->
				<div v-for="(titlemap,index) in item.titles">
					<!-- 如果title对应的有返回itemList则需要展示 -->
					<div v-if="item.data[titlemap.title]">
						<div style="margin-left: 0.625rem;padding: 0.125rem 0.125rem;background-color: #ABDAFF;">{{titlemap.title}}</div>
							<el-table :data="item.data[titlemap.title]" style="width:100%">
								<el-table-column min-width="80" property="itemName" label="名称" align='center' show-overflow-tooltip>
								</el-table-column>
								<el-table-column min-width="100" property="itemValue" label="结果" align='center' show-overflow-tooltip>
								</el-table-column>
								<el-table-column min-width="100" property="unit" label="单位" align='center' show-overflow-tooltip>
								</el-table-column>
								<el-table-column property="normalRange" min-width="160" label="正常取值范围" align='center' show-overflow-tooltip>
								</el-table-column>
								<el-table-column min-width="160" label="是否异常" align='center' show-overflow-tooltip>
									<template slot-scope="scope">
											<span v-if="scope.row.outOfBounds == 1" style="color: red;">异常</span>
									</template>
								</el-table-column>
							</el-table>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
		
		<p style="margin: 0.625rem;font-weight: bold;">投被保人归一数据</p>
		<el-collapse v-model="activeNames" @change="handleChange">
			<el-collapse-item :key="item.groupType" v-for="(item,index) in productList" :title="item.groupName" :name="index">
				<!-- 循环title -->
				<div v-for="(titlemap,index) in item.titles">
					<!-- 如果title对应的有返回itemList则需要展示 -->
					<div v-if="item.data[titlemap.title]">
						<div style="margin-left: 0.625rem;padding: 0.125rem 0.125rem;background-color: #ABDAFF;">{{titlemap.title}}</div>
						<div v-if="titlemap.title == '基本信息' || titlemap.title =='一般检查'||titlemap.title.indexOf('结论')>0 ">
							<el-table :data="item.data[titlemap.title]" style="width:100%">
								<el-table-column min-width="80" property="itemName" label="名称" align='center' show-overflow-tooltip>
								</el-table-column>
								<el-table-column min-width="500" property="itemValue" label="结果" align='center' show-overflow-tooltip>
								</el-table-column>
							</el-table>
						</div>
						<div v-else>
							<el-table :data="item.data[titlemap.title]" style="width:100%">
								<el-table-column min-width="80" property="itemName" label="名称" align='center' show-overflow-tooltip>
								</el-table-column>
								<el-table-column min-width="100" property="itemValue" label="结果" align='center' show-overflow-tooltip>
								</el-table-column>
								<el-table-column min-width="100" property="unit" label="单位" align='center' show-overflow-tooltip>
								</el-table-column>
								<el-table-column property="normalRange" min-width="160" label="正常取值范围" align='center' show-overflow-tooltip>
								</el-table-column>
								<el-table-column min-width="160" label="是否异常" align='center' show-overflow-tooltip>
									<template slot-scope="scope">
										<span v-if="scope.row.outOfBounds == 0 || scope.row.outOfBounds == 1">
											<span v-if="scope.row.outOfBounds == 0">正常</span>
											<span v-if="scope.row.outOfBounds == 1" style="color: red;">异常</span>
										</span>
										<span v-else></span>
		
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
		<!-- 弹框 -->
		<el-dialog title="评点依据" :visible.sync="opinionDialogVisible" width="60%" center>
			<el-row class="mb10">
				<el-table :data="reviewList">
					<el-table-column prop="itemId" label="ID" min-width="100" align='center'></el-table-column>
					<el-table-column prop="itemName" label="名称" min-width="100" align='center'></el-table-column>
					<!-- <el-table-column prop="itemValue" label="数值" min-width="100" align='center'></el-table-column> -->
					<el-table-column align='center' min-width="200" label="范围描述">
						<template slot-scope="scope">
							<div v-html="scope.row.reviews"></div>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="opinionDialogVisible = false">返 回</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import RobotConstants, {
		call
	} from "@/api/robot/robot"
	import constant from '@/utils/constant';
	export default {

		data() {
			return {

				activeNames: [0],
				activeNames1:[0],
				productList: [], //投被保人归一数据
				unNormalProductList:[],//异常的投被保人归一数据
				serialNumber: '',
				resultList: [],
				opinionDialogVisible: false,
				/* 智能点评依据 */
				reviewList: [],
				rangeType: {
					"OPENINGlow": '<',
					"OPENINGhigh": '<',
					"OPENINGhigh1": '>',
					"CLOSINGlow": '<=',
					"CLOSINGhigh": '<=',
					"CLOSINGhigh1": '>=',

				}
			}
		},
		created() {

		},
		activated() {
			if (undefined != this.$route.params.serialNumber && "" != this.$route.params.serialNumber) {
				this.serialNumber = this.$route.params.serialNumber;
				try{
					this.queryPersonDetail();
				}catch(err){
					console.log("归一数据解析出错"+err);
				}
				this.queryResultDetail();
			}
		},
		methods: {
			isShowHeader(index) {
				if (index >= 1) {
					return false;
				}
				return true;
			},
			objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex,
			}) {
				let span0 = this.$refs.span0[0].innerHTML;
				let span1 = this.$refs.span1[0].innerHTML;
				let span2 = this.$refs.span2[0].innerHTML;
				let rows = 0;
				let crtableType = row.name;
				if (span0.indexOf(crtableType) >= 0) {
					rows = span0.substr(span0.indexOf(":") + 1);
				}
				if (span1.indexOf(crtableType) >= 0) {
					rows = span1.substr(span1.indexOf(":") + 1);
				}
				if (span2.indexOf(crtableType) >= 0) {
					rows = span2.substr(span2.indexOf(":") + 1);
				}
				if (columnIndex === 0 || columnIndex == 1 || columnIndex == 5 || columnIndex == 6) {
					if (rowIndex === 0) {
						return {
							rowspan: rows,
							colspan: 1
						}
					}
					return {
						rowspan: 0,
						colspan: 0
					}
				} else {
					return
				}
			},
			seeRevieDetail(array) {
				this.opinionDialogVisible = true;
				this.reviewList = [];
				array.forEach(item => {
					let review = {};
					let temp = ""
					review['itemId'] = item.itemId;
					review['itemName'] = item.itemName;
					let studyType = item.studyType.toLowerCase();
					let val = JSON.parse(item[studyType])
					if (val['prefix']) {
						temp = temp.concat(val['prefix']);
						temp = temp.concat(":");
						temp = temp.concat("</br>");
					}
					if (studyType == 'quantitive') {
						let val_values = val['quantitives'];
						val_values.forEach(v => {
							let rangeType = v['rangeType'].split("_");
							let left = rangeType[0];
							let right = rangeType[1];
							let low = this.exchangeUndefined(v['low'], "low");
							let high = this.exchangeUndefined(v['high'], "high");
							if (high == "") {
								temp = temp.concat(item.itemName);
								temp = temp.concat(this.rangeType[right + 'high1']);
								temp = temp.concat(low);
								temp = temp.concat(v["units"]);
							} else {
								temp = temp.concat(low);
								temp = temp.concat(v["units"]);
								temp = temp.concat(this.rangeType[left + 'low']);
								temp = temp.concat(item.itemName);
								temp = temp.concat(this.rangeType[right + 'high']);
								temp = temp.concat(high);
								temp = temp.concat(v["units"]);
							}
							temp = temp.concat("</br>");
						})
					} else {
						let val_values = val['values'];
						val_values.forEach(v => {
							temp = temp.concat(v);
							temp = temp.concat("</br>");
						})
					}
					review['itemValue'] = item.itemValue;
					review['reviews'] = temp;
					this.reviewList.push(review);
				})
			},
			exchangeUndefined(value, type) {
				if (value == 'null' || value == undefined || value == "" || value == null || value == "undefined") {
					if (type == 'high') {
						return "";
					} else {
						return "0";
					}
				}
				return value;
			},
			exchangeIsOk(value) {
				if (value.outOfBounds == "0") {
					return "<span style='color:green'>正常</span>"
				} else if (value.outOfBounds == "1") {
					return "<span style='color:red'>异常</span>";
				} else {
					return ""
				}
			},
			handleChange(val) {
				console.log(val);
			},
			queryPersonDetail() {
				this.productList = [];
				this.unNormalProductList =[];
				call(RobotConstants.apis.queryPersonDetail + this.serialNumber, null, "get").then(res => {
					if (res.resultCode == constant.SUCCESS) {
						let pageData = res.data;
						let temp = [];
						//排除掉非空的
						if(pageData && pageData.length>0){
							pageData.forEach(item => {
								if (Object.keys(item.data).length > 0) {
									temp.push(item);
								}
							})
						}
						this.productList = temp;
						let untitles =[];
						this.productList.forEach( one =>{
							let unOne ={};
							let titles = one.titles;
							unOne['titles'] = titles;
							unOne['persCode'] = one.persCode;
							unOne['persName'] = one.persName;
							unOne['persAge'] = one.persAge;
							unOne['groupType'] = one.groupType;
							unOne['groupName'] = one.groupName;
							if(titles) {
								let unData = {};
								let index = 0;
								for(var tl in titles) {
									let title = titles[tl].title;
									let data = one.data[title];
									if(data){
										let list = []
										for( var dt in data){
											if(data[dt].outOfBounds == 1) {
												list.push(data[dt]);
											}
										}
										if (list &&list.length>0) {
											unData[title] = list;
										}
									}
								}
								unOne['data'] = unData;
							}
							this.unNormalProductList.push(unOne);
						})
					}
				})
			},
			queryResultDetail() {
				this.resultList = [];
				call(RobotConstants.apis.queryResultDetail + this.serialNumber, null, "get").then(res => {
					if (res.resultCode == constant.SUCCESS) {
						let pageData = res.data;
						this.resultList = pageData;
	
					}
				})
			}
		},
		computed: {},

	}
</script>

<style lang="less" scoped>
	.el-table {
		td {
			border: 1px solid #EBEEF5 !important;
		}
	}

	.el-table {
		td {
			is-leaf{
				border: 1px solid #EBEEF5 !important;
			}
		}
		th {
			is-leaf{
				border: 1px solid #EBEEF5 !important;
			}
		}
	}

	.fillcontain {
		padding-bottom: 0;

		.fastQuery {
			padding: 15px 20px 10px 20px;
			background: #fff;
			border-bottom: 1px solid #e1e1e1;

			.fastQuery_title {
				color: #666;
				padding: 6px 0px;
			}

			.fastQuery_item {
				margin: 0 10px;
			}

			.item_default {
				.el-button {
					color: #409EFF !important;
					border-color: #c6e2ff !important;
					background-color: #ecf5ff !important;
				}

			}

			.moreCondition {
				color: #68a3fc;
				cursor: pointer;
				padding: 6px 0px;

				.el-icon-d-arrow-right {
					transform: rotate(90deg);
				}

				.el-icon-d-arrow-left {
					transform: rotate(-90deg);
				}
			}
		}
	}

	.contain {
		background: #fff;
		padding: 10px;
		margin-bottom: 20px;
	}

	.pagination {
		padding: 10px 20px;
		text-align: right;
	}

	.operationIcon {
		// padding: 12px;
		border: 1px solid #e5e5e5;
		border-radius: 50%;
		width: 22px;
		height: 22px;
		display: inline-block;
		cursor: pointer;
		box-shadow: 0 0 3px #f9f9f9;

		.svg-icon {
			font-size: 14px;
			fill: #68a3fc;
		}
	}

	.search_container {
		padding: 20px 20px 0 20px;
	}

	.el-dropdown {
		vertical-align: top;
	}

	.el-dropdown+.el-dropdown {
		margin-left: 15px;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>
